<template>
    <div>
        <div class="mvlists" ref="mvlists">
            <ul>
                <li v-for="(item,index) in mvlists" :key="index">
                    <div class="imgs" 
                    :style="{'background-image':'url('+ item.cover+')'}"
                    v-show="playNum != index"
                    @click="getUrlshow(index,item.id)"
                    >
                        <span class="iconfont icon-bofang413"></span>
                    </div>
                    <div class="imgs"
                        v-if="playNum == index"
                        @click="mvplayend"
                    >
                        <!-- <video  id="video1" 
                            @canplaythrough="canplayfun"
                            :src="item.mvurl"
                            preload="metadata"
                            controls
                        ></video> -->
                    </div>
                    <p>
                        {{item.name}}
                    </p>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import {getMvlist,getMvUrl} from "../api/mv";
export default {
    data() {
        return {
            mvlists:[],
            offset:0, // 页码
            flag:true,
            playNum:null, // 对应播放视频下标
        }
    },
    methods:{
        getMvlistFun(){
            getMvlist({limit:5,offset:this.offset}).then(data=>{
                this.mvlists = data.data;
                // console.log(data.data)
            })
        },
        add(){
            // 防抖：阻止用户多次请求服务器
            if(this.flag){
                this.flag = false;
                this.offset += 5;
                getMvlist({limit:5,offset:this.offset}).then(data=>{
                    this.mvlists = this.mvlists.concat(data.data);
                    this.flag = true;
                })
            }
        },
        handleScroll(){
            let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; // 滚动条偏移量
            let lis = this.$refs.mvlists.getElementsByTagName("li");
            let num = lis.length;
            let liHeight = lis[num-3].offsetTop;
            if(scrollTop > liHeight){ // 触发加载数据
                this.add();
            }
        },
        getUrlshow(index,id){
            // this.playNum = index;
            getMvUrl({id}).then(data=>{
                this.$set(this.mvlists[index],"mvurl",data.data.url);
            })
            console.log(id)
            this.$router.push({
              path: "/recommend/mvDetails",
              query: { id },
            });
        },
        mvplayend(event){
            this.playNum = null;
            event.target.pause();
        },
        canplayfun(event){
            event.target.play();
        }
    },
    created(){
        this.getMvlistFun()
    },
    mounted(){
        this.$nextTick(()=>{
            // 监听滚动事件
            window.addEventListener("scroll",this.handleScroll)
        })
    },
    // beforeRouteLeave (to,from,next) {
    // // 导航离开该组件的对应路由时调用，可以访问组件实例 `this`
    //     if(to.path != from.path){
    //         this.handleScroll = null;
    //         removeEventListener("scroll",this.handleScroll);
    //     }else{
    //         next()
    //     }
    // }
}
</script>

<style lang="less">
    .mvlists{
        width: 100%;
        li{
            margin-bottom: 10px;
            .imgs{
                width: 100%;
                height: 200px;
                background-repeat: no-repeat;
                background-size: cover;
                position: relative;
                background-size: 100% 100%;
                span{
                    position: absolute;
                    top:0px;
                    left:0px;
                    right:0px;
                    bottom:0px;
                    margin:auto;
                    width: 80px;
                    height: 80px;
                    text-align: center;
                    line-height: 80px;
                    color: #fff;
                    font-size: 32px;
                    background: rgba(0, 0, 0, .5);
                    border-radius: 50%;
                }
                video{
                    width: 100%;
                    height: 200px;
                    margin: 0 auto;
                    display: block;
                }
            }
            p{
                height: 30px;
                line-height: 30px;
                font-size: 18px;
                text-indent: 1em;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
            }
        }
    }
</style>